<template>
  <view class="blindbox-box" @click="onClick">
    <image class="blindbox-bg" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-machine.png')" mode="scaleToFill" />
    <image class="blindbox-image" :class="{ 'blindbox-image--open': isOpen }" :src="useImage('/zuimei-film-oss/1.0.0/images/raffle-box.png')" mode="scaleToFill" />
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
export default {
  name: "blindbox-box",
  mixins: [hook, weixin],
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    onClick() {
      uni.$debounce(
        async () => {
          this.$emit("click", this.form)
          const res = await uni.$api.integral.draw({ programId: this.form.programId })
          this.$store.dispatch("getUserInfo")
          this.isOpen = true
          setTimeout(() => {
            this.isOpen = false
            this.$emit("open", res)
          }, 1300)
        },
        1000,
        true
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.blindbox-box {
  height: 272rpx;
  display: flex;
  position: relative;
  justify-content: center;

  .blindbox-bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }
  .blindbox-image {
    width: 162rpx;
    height: 148rpx;
    margin-top: 45rpx;
    position: relative;
    transition: all 0.3s ease;
    animation: wait 2s infinite ease-in-out;
    &--open {
      animation: open 1.5s ease-in-out;
    }
    @keyframes open {
      0% {
        transform: scale(0.9) rotate(-5deg);
        opacity: 1;
      }
      20% {
        transform: scale(1.1) rotate(5deg);
        opacity: 1;
      }
      40% {
        transform: scale(0.9) rotate(-5deg);
        opacity: 1;
      }
      60% {
        transform: scale(1.1) rotate(5deg);
        opacity: 1;
      }
      80% {
        transform: scale(0.9) rotate(-5deg);
        opacity: 1;
      }
      100% {
        transform: scale(3);
        opacity: 0;
      }
    }
    @keyframes wait {
      0% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(0, 10rpx);
      }
      100% {
        transform: translate(0, 0);
      }
    }
  }
}
</style>
